<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="flexWrap top-box">
					<view class="shop-name">{{store_name}}</view>
					<view class="all-btn" @tap="allopenLamp()" v-if="store_equipment_status==0">
						打开全部乒乓球灯
					</view>
					<view  class="all-btn" @tap="closeAllLamp()" v-else>关闭全部乒乓球灯</view>
				</view>
				<view class="table-box">
					<block v-for="(item,index) in billiardsList" :key='index'>
						<view class="table-item flexWrapNo" :class="{busy:item.equipment_status==1||item.order_status>0,repair:item.status==3}" v-if="item.type==1">
							<view class="table flexWarpCenterColumn" @tap="goPage('/pages/index/orderList?equipment_id='+item.id)">
								<view class="billiards-num">{{item.equipment_name}}</view>
							</view>
							<view class="table-info-box">
								<view class="billiards-status" v-if="item.order_status==0&&item.status!=3">空闲</view>
								<view class="billiards-status" v-if="item.order_status>0">使用中</view> <!-- &&item.equipment_status==1 -->
								<view class="billiards-status" v-if="item.status==3">维护中</view>
								<!-- 空闲中，没有订单 -->
								<view class="operation-box flexWrapNo" v-if="item.equipment_status">
									<view class="operation-btn flexWarpCenterColumn" @tap="goPage('/pages/manage/equipmentLog?equipment_id='+item.id)" v-if="identity==1">
										日志
									</view>
									<block v-if="item.order_status==0&&item.status!=3">
										<view class="operation-btn flexWarpCenterColumn" @tap="mainTain(index,3)">
											<image src="/static/index/repairIcon1.png" class="operation-icon"></image>
											维护
										</view>
										<view class="operation-btn flexWarpCenterColumn" @tap="openLamp(index)" v-if="item.equipment_status==0">
											<image src="/static/index/closeIcon1.png" class="operation-icon"></image>
											开灯
										</view>
										<block v-else>
											<view class="operation-btn red flexWarpCenterColumn" @tap="shutLamp(index)">
												<image src="/static/index/closeIcon.png" class="operation-icon"></image>
												立即关灯
											</view>
											<view class="operation-btn brown flexWarpCenterColumn" @tap="openModel(index)">
												<image src="/static/index/aclock-icon.png" class="operation-icon"></image>
												定时关灯
											</view>
										</block>
									</block>
									<!-- 有订单 -->
									<block v-if="item.order_status>0">
										<view class="operation-btn flexWarpCenterColumn" v-if="item.status==99" @tap="goPage('/pages/index/orderDetails?order_id='+item.order_id)">
											<image src="/static/index/endIcon.png" class="operation-icon"></image>
											结算
										</view>
										<view class="operation-btn flexWarpCenterColumn" v-else @tap="closeLamp(index)">
											<image src="/static/index/endIcon.png" class="operation-icon"></image>
											结束
										</view>
									</block>
									<!-- 维护中 -->
									<block v-if="item.status==3">
										<view class="operation-btn flexWarpCenterColumn yellow" @tap="mainTain(index,1)">
											<image src="/static/index/repairIcon.png" class="operation-icon"></image>
											结束
										</view>
										<view class="operation-btn flexWarpCenterColumn" @tap="openLamp(index)" v-if="item.equipment_status==0">
											<image src="/static/index/closeIcon1.png" class="operation-icon"></image>
											开灯
										</view>
										<block v-else>
											<view class="operation-btn red flexWarpCenterColumn" @tap="shutLamp(index)">
												<image src="/static/index/closeIcon.png" class="operation-icon"></image>
												立即关灯
											</view>
											<view class="operation-btn brown flexWarpCenterColumn" @tap="openModel(index)">
												<image src="/static/index/aclock-icon.png" class="operation-icon"></image>
												定时关灯
											</view>
										</block>
									</block>
								</view>
								<view class="operation-box" v-else>
									<view class="operation-btn flexWarpCenterColumn" @tap="goPage()">
										<image src="/static/index/fresh-icon.png" class="operation-icon"></image>
										刷新
									</view>
								</view>
							</view>
						</view>
						<view class="table-item mj flexWrapNo" :class="{mjbusy:item.equipment_status==1||item.order_status>0,mjrepair:item.status==3}" v-else>
							<view class="table flexWarpCenterColumn" @tap="goPage('/pages/index/orderList?equipment_id='+item.id)">
								<view class="billiards-num">{{item.equipment_name}}</view>
							</view>
							<view class="table-info-box">
								<view class="billiards-status" v-if="item.order_status==0&&item.status!=3">空闲</view>
								<view class="billiards-status" v-if="item.order_status>0">使用中</view><!-- ||item.equipment_status==1 -->
								<view class="billiards-status" v-if="item.status==3">维护中</view>
								<!-- 空闲中，没有订单 -->
								<view class="operation-box flexWrapNo">
									<block v-if="item.order_status==0&&item.status!=3">
										<view class="operation-btn flexWarpCenterColumn" @tap="mainTain(index,3)">
											<image src="/static/index/repairIcon1.png" class="operation-icon"></image>
											维护
										</view>
										<view class="operation-btn flexWarpCenterColumn" @tap="openLamp(index)" v-if="item.equipment_status==0">
											<image src="/static/index/closeIcon1.png" class="operation-icon"></image>
											开灯
										</view>
										<view class="operation-btn flexWarpCenterColumn" @tap="shutLamp(index)" v-else>
											<image src="/static/index/closeIcon.png" class="operation-icon"></image>
											关灯
										</view>
									</block>
									<!-- 有订单 -->
									<block v-if="item.order_status>0"><!-- ||item.equipment_status==1 -->
										<view class="operation-btn flexWarpCenterColumn" @tap="closeLamp(index)">
											<image src="/static/index/endIcon.png" class="operation-icon"></image>
											结束
										</view>
									</block>
									<!-- 维护中 -->
									<block v-if="item.status==3">
										<view class="operation-btn flexWarpCenterColumn yellow" @tap="mainTain(index,1)">
											<image src="/static/index/repairIcon.png" class="operation-icon"></image>
											结束
										</view>
										<view class="operation-btn flexWarpCenterColumn" @tap="openLamp(index)" v-if="item.equipment_status==0">
											<image src="/static/index/closeIcon1.png" class="operation-icon"></image>
											开灯
										</view>
										<view class="operation-btn flexWarpCenterColumn red" @tap="shutLamp(index)" v-else>
											<image src="/static/index/closeIcon.png" class="operation-icon"></image>
											关灯
										</view>
									</block>
									<view class="operation-btn flexWarpCenterColumn" @tap="openRoomDoor(index)">
										<image src="/static/index/door-icon.png" class="operation-icon"></image>
										开门
									</view>
									<view class="operation-btn flexWarpCenterColumn" @tap="closeRoomDoor(index)" v-if="item.order_status<=0">
										<image src="/static/index/door-icon.png" class="operation-icon"></image>
										关门
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view class="tips-box flexWarpCenterColumn" v-if="changetimeFlag">
					<view class="tips-name">关灯设置</view>
					<view class="tips-text" style="font-size: 24rpx;margin-top: 20upx;margin-bottom: 8upx;">
						为了避免忘记关灯,影响店内消费,请设置关灯时间。
					</view>
					<view class="tips-text">定时关灯：</view>
					<view class="flexWrapNo" style="margin-top: 40upx;">
						<view class="input-box" style="width: 200upx;">
							<picker @change="changeDate" :value="dateIndex" :range="dateList" range-key="name">
								<view class="flexWrapNo">
									<view  class="select-input" v-if="dateName">{{dateList[dateIndex].name}}</view>
									<view class="select-input" v-else >请选择日期</view>
									<text class="triangle"></text>
								</view>
							</picker>
						</view>
						<view class="line"></view>
						<view class="input-box" style="width: 140upx;margin-top: 0;">
							<picker mode="time" :data-index='1' :start="currentTime" :value="starTime" @change="bindDateChange">
								<view class="flexWrapNo">
									<view class="select-input" v-if="starTime">{{starTime}}</view>
									<view class="select-input" v-else>时间</view>
									<text class="triangle"></text>
								</view>
							</picker>
						</view>
					</view>
					<view class="weihu-box">
						结束维护
						<switch class="switch" :checked="maintenance" @change="changeSwitch"></switch>
					</view>
					<view class="btn-box flexWrap">
						<view class="tips-btn" @tap="closeModel()">取消</view>
						<view class="tips-btn noStarted" @tap="setClose()">确定</view>
					</view>
				</view>
				
				<!--操作指引悬浮按钮 -->
				<guideline :path="'pages/index/tableManage'"></guideline>
				
				<view class="mask-wrap" v-if="changetimeFlag"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			const current = this.getTimeString()
			return {
				pageOpc:0,
				billiardsList:[],
				store_name:"",
				changetimeFlag:false,
				starTime:"",
				dateList:[{name:"今日",id:1},{name:'次日',id:2}],
				dateIndex:0,
				dateName:"",
				dateId:"",
				equipment_id:"",
				currentTime:current,
				store_equipment_status:0,
				maintenance:false,
				identity:1
			}
		},
		onShow() {
			this.identity=uni.getStorageSync('identity')
			this.getList();
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			this.getList();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		methods: {
			changeSwitch(e){
				console.log(e)
				this.maintenance=e.detail.value
			},
			getTimeString(num) {
				num=num||0
				var time = new Date();
				time.setHours(time.getHours() + num);
				let hours = time.getHours() <= 9 ? '0' + time.getHours() : time.getHours()
				let minutes = time.getMinutes() <= 9 ? '0' + time.getMinutes() : time.getMinutes()
				return hours + ":" + minutes
			},
			changeDate(e){
				this.dateIndex = e.detail.value
				this.dateName=this.dateList[this.dateIndex].name
				this.dateId=this.dateList[this.dateIndex].id
				if(this.dateIndex==1){
					this.currentTime="0:00"
					this.starTime = "0:00"
				}else{
					this.currentTime=this.getTimeString()
					this.starTime =this.getTimeString()
				}
			},
			bindDateChange(e) {
				let index = e.currentTarget.dataset.index
				if (index == 0) {
					this.starDate = e.target.value
				} else {
					this.starTime = e.target.value
				}
			},
			closeModel(){
				this.changetimeFlag=false
				this.starTime = ""
				this.dateIndex=0
			},
			openModel(index){
				this.changetimeFlag=true
				this.equipment_id=this.billiardsList[index].id
			},
			// 获取台桌
			getList(){
				this.$tools.loadIng()
				this.$request.post(this.$api.equipmentList, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.billiardsList=data.list
						this.store_name=data.store_name
						this.store_equipment_status=data.store_equipment_status
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			// 包房开门
			openRoomDoor(index){
				uni.showModal({
					title:"是否确定开门?",
					success: (res) => {
						if(res.confirm){
							uni.showLoading({
								title:'开门中，请稍等',
								mask:true
							})
							this.$request.post(this.$api.openRoomDoor, {
								equipment_id:this.billiardsList[index].id
							}, {
								token:true
							}).then(res => {
								console.log(res)
								if (res.code==1) {
									this.$tools.hideLoading()
									this.$tools.showToast('开门成功')
								}
							}).finally(() => {
								setTimeout(()=>{
									this.$tools.hideLoading()
								}, 1000)
							})
						}
					}
				})
			},
			closeRoomDoor(index){
				uni.showModal({
					title:"是否确定关门?",
					success: (res) => {
						if(res.confirm){
							uni.showLoading({
								title:'关门中，请稍等',
								mask:true
							})
							this.$request.post(this.$api.closeRoomDoor, {
								equipment_id:this.billiardsList[index].id
							}, {
								token:true
							}).then(res => {
								console.log(res)
								if (res.code==1) {
									this.$tools.hideLoading()
									this.$tools.showToast('关门成功')
								}
							}).finally(() => {
								setTimeout(()=>{
									this.$tools.hideLoading()
								}, 1000)
							})
						}
					}
				})
			},
			// 关灯
			closeLamp(index){
				uni.showModal({
					title:"是否确定结束?",
					success: (res) => {
						if(res.confirm){
							this.$request.post(this.$api.closeLamp, {
								store_id:uni.getStorageSync('store_id'),
								equipment_id:this.billiardsList[index].id
							}, {
								token:true
							}).then(res => {
								if (res.code==1) {
									setTimeout(()=>{
										this.getList();
									},500)
								}
							})
							// uni.navigateTo({
							// 	url:"/pages/index/orderDetails?order_id="+this.billiardsList[index].order_id+"&showCancel=1"
							// })
						}
					}
				})
			},
			// 全部开灯
			allopenLamp(){
				uni.showModal({
					title:"是否确定开灯?",
					success: (res) => {
						if(res.confirm){
							this.$request.post(this.$api.allopenLamp, {
								store_id:uni.getStorageSync('store_id')
							}, {
								token:true
							}).then(res => {
								if (res.code==1) {
									this.$tools.showToast('操作成功');
									setTimeout(()=>{
										this.getList();
									},500)
								}
							})
						}
					}
				})
			},
			closeAllLamp(){
				uni.showModal({
					title:"是否确定关灯?",
					success: (res) => {
						if(res.confirm){
							this.$request.post(this.$api.closeAllLamp, {
								store_id:uni.getStorageSync('store_id')
							}, {
								token:true
							}).then(res => {
								if (res.code==1) {
									this.$tools.showToast('操作成功');
									setTimeout(()=>{
										this.getList();
									},500)
								}
							})
						}
					}
				})
			},
			// 设置关灯
			setClose(){
				this.$request.post(this.$api.setClose, {
					store_id:uni.getStorageSync('store_id'),
					equipment_id:this.equipment_id,
					today:this.dateId,
					hour:this.starTime,
					maintenance:Number(this.maintenance)
				}, {
					token:true
				}).then(res => {
					if (res.code==1) {
						this.closeModel();
						this.$tools.showToast('设置成功');
					}
				})
			},
			// 开灯
			openLamp(index){
				uni.showModal({
					title:"是否确定开灯?",
					success: (res) => {
						if(res.confirm){
							this.$request.post(this.$api.openLamp, {
								store_id:uni.getStorageSync('store_id'),
								equipment_id:this.billiardsList[index].id
							}, {
								token:true
							}).then(res => {
								if (res.code==1) {
									this.closeModel();
									this.$tools.showToast('操作成功');
									setTimeout(()=>{
										this.getList();
									},500)
								}
							})
						}
					}
				})
			},
			// 维护中的关灯
			shutLamp(index){
				uni.showModal({
					title:'是否确定关灯?',
					success: (res) => {
						if(res.confirm){
							this.$request.post(this.$api.shutLamp, {
								store_id:uni.getStorageSync('store_id'),
								equipment_id:this.billiardsList[index].id
							}, {
								token:true
							}).then(res => {
								setTimeout(()=>{
									this.getList();
								},500)
							})
						}
					}
				})
			},
			// 维护
			mainTain(index,status){
				uni.showModal({
					title:'是否确定开启/关闭维护?',
					success: (res) => {
						if(res.confirm){
							this.$request.post(this.$api.mainTain, {
								store_id:uni.getStorageSync('store_id'),
								equipment_id:this.billiardsList[index].id,
								status:status
							}, {
								token:true
							}).then(res => {
								if (res.code==1) {
									setTimeout(()=>{
										this.getList();
									},500)
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 36upx 10upx;
	}
	.top-box{
		border-bottom:1rpx solid #161653;
		padding:0 24upx;
		padding-bottom:24upx;
		.shop-name{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 50upx;
			color: #FFFFFF;
		}
		.all-btn{
			width: 204upx;
			height: 74upx;
			line-height: 74upx;
			background:#681D3C;
			border-radius: 16upx;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
		}
	}
	.table-box{
		margin-top: 48upx;
		.table-item{
			margin-bottom: 44upx;
			.table{
				width: 220upx;
				height: 162upx;
				justify-content: center;
				background: url(/static/index/idle.png) no-repeat center/100% 100%;
				flex:none;
				.billiards-num{
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 50upx;
					color: #FFFFFF;
					text-shadow: 0px 2px 6upx rgba(0,0,0,0.65);
				}
			}
			.table-info-box{
				margin-left: 22upx;
				.billiards-status{
					width: 122upx;
					height: 44upx;
					line-height: 44upx;
					text-align: center;
					border: 2px solid #4FBE29;
					border-radius: 42upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color:#4FBE29;
				}
				.operation-box{
					margin-top: 32upx;
					.operation-btn{
						width: 104upx;
						height: 104upx;
						background: #1D1C5C;
						border-radius: 16upx;
						font-size: 22upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						justify-content: center;
						margin-right: 16upx;
						.operation-icon{
							width: 36upx;
							height: 36upx;
							margin-bottom: 4upx;
						}
					}
					.red{
						background-color: #FF4726;
					}
					.yellow{
						background-color: #EFC129;
					}
					.pink{
						background-color: #5B1FCB;
					}
					.brown{
						background-color: #684B2F;
					}
				}
			}
		}
		.mj{
			.table{
				width: 220upx;
				height: 182upx;
				// background: url(/static/index/mj-idle.png) no-repeat center/100% 100%;
			}
		}
		.busy{
			.table{
				background: url(/static/index/busy.png) no-repeat center/100% 100%;
			}
			.billiards-status{
				border: 2px solid #FFB726 !important;
				color: #FFB726 !important;
			}
		}
		.mjbusy{
			.table{
				// background: url(/static/index/mj-busy.png) no-repeat center/100% 100%;
			}
			.billiards-status{
				border: 2px solid #FFB726 !important;
				color: #FFB726 !important;
			}
		}
		.repair{
			.table{
				background: url(/static/index/repair.png) no-repeat center/100% 100%;
			}
			.billiards-status{
				border: 2px solid #969696 !important;
				color: #969696 !important;
			}
		}
		.mjrepair{
			.table{
				// background: url(/static/index/mj-repair.png) no-repeat center/100% 100%;
			}
			.billiards-status{
				border: 2px solid #969696 !important;
				color: #969696 !important;
			}
		}
	}
	.tips-box{
		width: 660upx;
		height:652upx;
		background:#1D1C5C;
		border-radius: 16upx;
		position: fixed;
		top: 400upx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		.tips-name{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 800;
			line-height: 50upx;
			color: #FFFFFF;
			margin-top: 44upx;
		}
		.tips-text{
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			width: 560upx;
			margin-top: 12upx;
		}
		.line{
			width: 30upx;
			height: 2upx;
			background-color: #fff;
			margin: 0 20upx;
		}
		.operation-box{
			width: 560upx;
			margin-top: 32upx;
			.operation-item{
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-right: 40upx;
				.operation-icon{
					width: 48upx;
					height: 48upx;
					margin-right: 10upx;
				}
			}
		}
		.input-box{
			height: 100upx;
			width: 500upx;
			background: #312F80;
			border-radius: 16upx;
			padding: 0 32upx;
			margin-top: 34upx;
			.triangle{
				border-top-color: #FFFFFF;
			}
			&:nth-of-type(1){
				margin-top: 0;
			}
			input{
				height: 100upx;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				color:rgba(255,255,255,.5);
			}
			.select-input{
				height: 100upx;
				line-height: 100upx;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				color:#fff;
				flex: auto;
			}
			.placeholderClass{
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				color:rgba(255,255,255,.5);
			}
		}
		.weihu-box{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 50upx;
			color: #FFFFFF;
			margin-top: 30upx;
			align-self: baseline;
			padding: 0 60upx;
			.switch{
				margin-left: 20upx;
			}
		}
		.btn-box{
			margin-top: 56upx;
			.tips-btn{
				width: 260upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border: 2upx solid #26BCFD;
				border-radius: 16upx;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #26BCFD;
			}
			.noStarted{
				color: #FFFFFF;
				background-color: #26BCFD;
				margin-left: 28upx;
			}
		}
	}
</style>
